<template>
  <div class="list-tree-box">
    <avue-tree class="filter-tree"
               v-model="form"
               :option="option"
               :data="albumTreeData"
               @update="update"
               @node-click="nodeClick"
               highlight-current="true"
               @save="save"
               @del="delnode"
    >

    </avue-tree>

    <div class="list-treeBtn">
      <el-button type="text"
                 size="mini"
                 icon="el-icon-plus"
                 @click="addPic">新增</el-button>
      <el-button type="text"
                 size="mini"
                 icon="el-icon-edit"
                 @click="editPic">修改</el-button>
      <el-button type="text"
                 size="mini"
                 icon="el-icon-delete"
                 @click="deletePic">删除</el-button>
    </div>

    <el-dialog title="新增文件夹"
               center
               width="40%"
               :visible.sync="dialogFormVisible"
               append-to-body
               :close-on-click-modal="false"
               :show-close="false">
      <avue-form
                 ref="addForm"
                 :data="filerForm"
                 v-model="filerFormModel"
                 :option="optionForm"
                 @reset-change="emptytChange"
                 @submit="addFiler"></avue-form>
    </el-dialog>
    <el-dialog title="修改文件夹"
               center
               width="40%"
               :visible.sync="dialogFormVisibleEdit"
               append-to-body
               :close-on-click-modal="false"
               :show-close="false">
      <avue-form ref="editForm"
                 :data="filerForm"
                 v-model="filerFormModelEdit"
                 :option="optionForm"
                 @reset-change="emptytChange"
                 @submit="editFiler"></avue-form>
    </el-dialog>
  </div>
</template>
<script>
import { update, getAlbumTreeData, add, remove } from "@/api/base/res/album";
import constants from "@/const/constants";
import {
  getAllUserInfo
} from "@/api/user";
import {
testPicNames
} from '@/util/util';
export default {
  props: {
    albumCode: {
      type: String,
      default: "store"
    },
    resType: {
      type: String,
      default: constants.FILE_TYPE_PIC
    }
  },
  data () {
    return {
      right: "right",
      aCode: "store",
      dialogFormVisible: false,
      dialogFormVisibleEdit: false,
      albumTreeData: [],
      tablelist: [],
      form: {},
      data: [],
      menuId: "",
      option: {
        dialogWidth: "70%",
        nodeKey: "id",
        size: "small",
        addBtn: false,
        editBtn: false,
        delBtn: false,
        menu: false,
        formOption: {
          labelWidth: 100,
          menuBtn: true,
          menuPostion: "right",
          submitBtn: true,
          emptyBtn: true,
          submitSize: "small",
          submitText: "新增",
          emptyText: "取消",
          emptySize: "small",
          column: [
            {
              label: "上级文件夹",
              prop: "parentid",
              type: "tree",
              dicData: [],
              hide: true,
              props: {
                value: "id",
                label: "albumName",
                children: "children"
              },
              rules: [
                {
                  required: true,
                  message: "请选择上级文件夹",
                  trigger: "blur"
                }
              ]
            }
          ]
        },
        props: {
          value: "id",
          label: "albumName",
          children: "children"
        }
      },
      filerForm: {
        albumName: "",
        parentid: "",
        id: "",
      },
      filerFormModel: {},
      filerFormModelEdit: {},
      optionForm: {
        emptyBtn: true,
        submitBtn: true,
        menuWidth: 300,
        labelWidth: "100px",
        emptyText: "取消",
        column: [
          {
            label: "名称",
            prop: "albumName",
            default: '',
            row: true,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入相册名",
                trigger: "blur"
              },
              {
               validator: testPicNames,
              }
            ]
          },
          {
            label: "所属上一级文件夹",
            prop: "parentid",
            type: "tree",
            dicData: [],
            display:false,
            span: 24,
            props: {
              value: "id",
              label: "albumName",
              children: "children"
            },
            rules: [
              {
                required: true,
                message: "请选择上级文件夹",
                trigger: "change"
              }
            ]
          }
        ]
      }
    };
  },
  created () {
  },
  mounted(){
    //获取用户信息
    this.aCode = this.albumCode;
    getAllUserInfo().then(res => {
      if(res.data.data.roleId!=1){
        this.aCode = "store";
        this.initTree();
      }
    })
  },
    watch:{
      'dialogFormVisible'(){
          if(this.dialogFormVisible){
              this.filerFormModel.albumName = '';
              this.$nextTick(()=>{
                  this.$refs["addForm"].clearValidate();
              });
              this.optionForm.column[1].display = true;
          }else{
			 this.$refs.addForm.resetForm();
			 this.$refs["addForm"].clearValidate();
			}
      },
      'dialogFormVisibleEdit'(){
          if(this.dialogFormVisibleEdit){
              // this.$refs.form.resetForm();
              // this.$nextTick(()=>{
              //     this.$refs["form"].clearValidate();
              // });
              this.optionForm.column[1].display = false;
          }
      }
    },
  methods: {
    //新增文件夹
    addFiler (data,done) {
      add(data).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "添加成功"
          });
            done()
          this.initTree(); //更新tree
          this.dialogFormVisible = false;
          this.filerForm.name = "";
        } else {
          this.$message({
            type: "error",
            message: res.data.message
          });
          done()
        }
      });
    },
    //修改文件夹方法
    editFiler (data,done) {
        if(!data.parentid){
            data.parentid = data.id;
        }
      update(data).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "修改成功"
          });
          done()
          this.initTree(); //更新tree
          this.dialogFormVisibleEdit = false;
          this.filerForm.name = "";
        } else {
          this.$message({
            type: "error",
            message: res.data.message
          });
          done()
        }
      });
    },
    //打开新增弹框
    addPic () {
      this.dialogFormVisible = true;
      this.filerFormModel.parentid = this.filerForm.parentid;
    },
    //清空  重置
    emptytChange () {
      this.filerForm.name = "";
      this.dialogFormVisible = false;
      this.dialogFormVisibleEdit = false
    },
    //打开修改弹框
    editPic () {
      this.filerFormModelEdit = this.filerForm
      this.dialogFormVisibleEdit = true;
      this.filerFormModelEdit.id = this.filerForm.id
    },
    //删除文件夹
    deletePic () {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        remove(this.treeItem.id).then(res => {
          if (res.data.code == 200) {
            this.initTree(); //更新tree
            this.$message.success("删除成功");
          } else {
            this.$message.error(res.data.message);
          }
        });
      });
    },
    //初始化请求树结构数据
    initTree () {
      getAlbumTreeData(this.aCode, this.resType).then(res => {
        if (res.status == 200) {
          if (res.data.code == 200) {
            this.albumTreeData = res.data.data;
            if(res.data.data.length > 0){
              this.optionForm.column[1].dicData = res.data.data;
              this.nodeClick(res.data.data[0])
            }else{
              this.optionForm.column[1].dicData = [];
              this.optionForm.column[1].rules[0].required = false;
            }
          } else {
            this.$message.error(res.data.message);
          }
        }
      });
    },
    //删除节点方法
    async delnode () {
      // await delrowData(data.menuId).then(res => {
      //     if (res.status == 200) {
      //         this.$message({
      //             type: "success",
      //             message: "操作成功"
      //         });
      //         this.initTree();
      //     }
      // });
    },
    //新增树节点方法
    async save () {
      // await add(data.form).then(res => {
      //   if (res.status == 200) {
      //     this.$message({
      //       type: 'success',
      //       message: '添加成功'
      //     })
      //   }
      // })
      //done();
    },
    async update (listTreeData, node, done) {
      await update(listTreeData).then(res => {
        if (res.status == 200) {
          this.$message.success("更新成功");
        }
      });
      done();
    },
    nodeClick (data) {
      this.treeItem = data;
      this.filerForm.id = data.id;
      this.filerForm.parentid = data.parentid;
      this.filerForm.albumName = data.albumName;
      this.$emit('click', this.treeItem.id + "");
    }
  },
  components: {}
};
</script>
<style scoped>
.list-tree-box {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: 1px solid #dcdfe6;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}
.filter-tree {
  flex: 1;
  border-radius: 4px;
  overflow-y: scroll;
}
.list-treeBtn {
  display: flex;
  justify-content: center;
}
</style>